<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            height: 400px;
            width: 800px;
            margin: 0px auto;
            border: 1px solid #000;
            border-right: 1px #000;
            border-collapse: collapse;
        }

        table td {
            border: 1px solid #000;
            text-align: center;
            /* height: 20px; */
        }

        .yi {
            margin-left:430px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>昵称</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="content">

        </tbody>
    </table>
    <div class="yi">
        <button class="xuan">全选</button>
        <button class="xuan">不选</button>
        <button class="xuan">反选</button>
    </div>
</body>
<script>
    var res = [
        {
            "name": "刘备",
            "nickname": "小刘",
            "age": 58,
            "gender": "男",
            "hobby": ["撩妹", "装逼", "编草鞋"]
        },
        {
            "name": "关羽",
            "nickname": "关二",
            "age": 47,
            "gender": "男",
            "hobby": ["耍大刀", "变脸", "喝酒"]
        },
        {
            "name": "张飞",
            "nickname": "张三",
            "age": 45,
            "gender": "男",
            "hobby": ["打架", "喝酒", "耍流氓"]
        },
        {
            "name": "赵云",
            "nickname": "赵四",
            "age": 22,
            "gender": "男",
            "hobby": ["打架", "喝酒", "耍帅"]
        },
        {
            "name": "貂蝉",
            "nickname": "美女",
            "age": 20,
            "gender": "女",
            "hobby": ["撩汉", "化妆"]
        },
        {
            "name": "小乔",
            "nickname": "乔二",
            "age": 18,
            "gender": "女",
            "hobby": ["弹琴", "唱歌", "撩周瑜"]
        }
    ]

    var content = document.querySelector('#content')

    content.innerHTML += res.map((item, index) => {
        // 这里给他一个class名 就是要获取这个属性用来下面的抄作
        return `<tr>
    <td><input type="checkbox" class = "er"></td>
    <td>${item.name}</td>
    <td>${item.nickname}</td>
    <td>${item.age}</td>
    <td>${item.gender}</td>
    <td>${item.hobby}</td>
    <td><button class = "shan">x</td>
   </tr>`
    }).join('')

    var er = document.querySelectorAll('.er')
    var shan = document.querySelectorAll('.shan')
    console.log(shan)
var xuan = document.querySelectorAll('.xuan')

//这里是用事件委托 
content.onclick = function(e) {

//e.target就是点击那个元素它就是那个元素 当你点击shan这个类名的时候
//他们if条件就匹配上了  就执行下面的代码
if(e.target.className == "shan") {

//点击删除这里时候 e.target就是指向删除shan  你要删的是tr这一行  所以要返回它的父元素的父元素
e.target.parentNode.parentNode.remove();
}
}

xuan[0].onclick =function() {
    for(var i = 0; i<er.length; i++) {
    er[i].checked = true
    }
}

xuan[1].onclick =function() {
    for(var j = 0; j<er.length; j++) {
    er[j].checked = false
    }
}

xuan[2].onclick =function() {
    for(var r = 0; r<er.length; r++) {
    er[r].checked =! er[r].checked
    }
}


</script>

</html>